<html>
<head>
    <title>摄像头档案</title>
    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>
        body{
            background: #F2F2F2;
        }
        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer{
            height: 200px;
        }




    </style>
</head>
<body>
<div  class="page" id="page-elesafe">

    <div class="page-title">设备管理 › 摄像头档案</div>
    <div class="page-main">
        <el-row>
            <el-col :span="4">
                <dev-tree v-on:click-node="userNode" :level="2"></dev-tree>
            </el-col>
            <el-col :span="20">
                <div class="main-head">
                    <el-form :inline="true">
                        <el-form-item label="">
                          <el-input v-model="devName" placeholder="请输入设备名称关键字" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search" style="background: #578BBB">查询</el-button>
                            <el-button type="primary" @click="addClick" style="background: #5BBD8B">新增</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <el-table border stripe style="width: 100%" :data="videoData">
                    <el-table-column prop="projectName" label="项目名称" align="center">
                    </el-table-column>
                    <el-table-column prop="captorName" label="设备名称" align="center">
                    </el-table-column>
                    <el-table-column prop="zoneName" label="安装地址" align="center">
                    </el-table-column>
                    <el-table-column prop="time" label="安装时间" align="center">
                    </el-table-column>
                    <el-table-column label="操作" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" round size="small"  icon="el-icon-edit"></el-button>
                            <el-button round icon="el-icon-delete"  size="small" @click="delClick(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page-footer"  style="left:auto">
                    <el-pagination background layout="prev, pager, next" :total="50" :current-page.sync="currentPage" @current-change="onChangePage">
                    </el-pagination>
                </div>

            </el-col>
        </el-row>
        <el-dialog  :title="editMod?'编辑摄像头':'新增摄像头'" :visible.sync="dialogFormVisible" center width="25%" :show-close="false">
            <el-form :model="form" ref="form" >
                <el-form-item label="项目名称"  prop="projectNo" :label-width="formLabelWidth"  :rules="[
                             {required:true,message:'站点名称不能为空!',trigger:'blur'}
                            ]">

                    <el-select v-model="form.projectNo" placeholder="请选择项目" style="width: 100%;" @change="selectTrigger(form.projectNo)">
                        <el-option
                                v-for="item in proList"
                                :key="item.projectNo"
                                :label="item.projectName"
                                :value="item.projectNo">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备名称" prop="captorName" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'名称不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="form.captorName"  autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="安装时间" prop="time" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'安装时间不能为空!',trigger:'blur'}]">
                    <el-date-picker  type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="form.time" placeholder="日期"  suffix-icon="el-icon-date" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="安装地址" prop="zoneID" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'地址不能为空!',trigger:'blur'}]">
                    <el-select v-model="form.zoneID" placeholder="请选择区域" style="width: 100%;">
                        <el-option
                                v-for="item in zoneList"
                                :key="item.zone_id"
                                :label="item.zone_name"
                                :value="item.zone_id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="url1" prop="Url1" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'url1不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="form.Url1"  autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="url2" prop="Url2" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'url2不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="form.Url2"  autocomplete="off" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelClick('form')" style="background: #7eb8b0">取 消</el-button>
                <el-button  @click="submitClick('form')" style="background:#f9b317">确 定</el-button>
            </div>
        </el-dialog>
    </div>


</div>



<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>


<script>

    var vuePage=new Vue({
        el:'#page-elesafe',
        data:{
            formLabelWidth: '120px',
            day:'',
            videoData:'',
            dialogFormVisible:false,
            currentPage:1,
            form:{
            },
            editMod:false,
            zoneList:'',
            proList:'',
            devName:'',
            proNo:'',
            zoneId:''
        },
        methods:{
            search:function(){
                this.getVideo({captorName:this.devName});
            },

            addClick:function(){
                this.form = {};
                this.editMod = false;
               this.dialogFormVisible=true;
            },
            selectTrigger:function(proNo){
                HttpUtil.get('Zone/List2',{ProjectNo:proNo}).success((res)=>{
                    this.zoneList = res.data;
                });
            },
            userNode(data){
                var ids = data.id.split('_');
                this.proNo ='';
                this.zoneId ='';
                this.devName ='';
                if(ids[0] =='P'){
                    this.proNo = data.attributes.projectNo;
                    this.getVideo({projectNo: data.attributes.projectNo});
                }else if(ids[0] == 'Z') {
                    this.zoneId = ids[1];
                    this.getVideo({zoneID: ids[1]});
                }else this.videoData =[];
            },
            handleClick(data){
                console.log(data);
                this.editMod = true;
                this.dialogFormVisible=true;
                this.form = data;
            },
            delClick(data) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    HttpUtil.get('VideoCaptor/delete',{Id:data.id}).success((res)=>{
                          this.$message({
                              type: 'success',
                              message: '删除成功!'
                          });
                          this.getVideo();
                      })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            submitClick(formName){
                this.$refs[formName].validate((valid) =>{
                   if (valid){
                       if (this.editMod){
                           HttpUtil.get('VideoCaptor/update',this.form).success((res)=>{
                               this.getVideo();
                               this.cancelClick(formName);
                               this.$message({
                                   type:'success',
                                   message:'修改成功'
                               })
                           })
                       } else {
                           console.log(this.form)
                           this.form.state = 1;
                           HttpUtil.get('VideoCaptor/add',this.form).success((res)=>{
                               this.getVideo();
                               this.cancelClick(formName);
                               this.$message({
                                   type:'success',
                                   message:'保存成功'
                               })
                           })
                       }

                   }else{
                       this.$message({
                           type:'error',
                           message:'输入内容不能为空'
                       })
                   }

                });

            },
            onChangePage(page){

                this.getVideo({projectNo:this.proNo,zoneID:this.zoneId  ,pageno:page,pagesize: 10,captorName:this.devName});
            },
            cancelClick(formName){
                this.$refs[formName].clearValidate()
                this.dialogFormVisible = false;

            },
            getVideo(params){
                HttpUtil.get('VideoCaptor/list',params).success((res)=>{
                    this.videoData = res.data
                });
            }
        },
        created:function(){

            this.day = TimeUtil.convertToString(new Date()).substr(0,10);
            this.getVideo();
            HttpUtil.get('Project/List').success((res)=>{
                this.proList = res.data;
            });
        },
        mounted:function(){

        }
    });


</script>

</body>
</html>
